<template>
  <cm-tip-text ref="tipText" :cm-class="cmClass" :cm-style="cmStyle" :size="size" :tip-size="tipSize" :cover="cover"
    @click="clickHandler">
    <template v-slot:cover>
      <!-- 旺相休囚死，时令层 -->
      <view class="bagua-element-cover-layer" :class="[seasonClass]" v-if="season >= 0"></view>
      <!-- 对象比较，本位层 -->
      <view class="bagua-element-cover-layer compare-base" v-if="compareSelected.base === bagua.id"></view>
      <!-- 对象比较，对位层 -->
      <view class="bagua-element-cover-layer compare-opposite" v-if="compareSelected.opposite === bagua.id"></view>
      <slot name="cover"></slot>
    </template>
    <template v-slot:leftTop>
      <slot name="leftTop"></slot>
    </template>
    <template v-slot:leftBottom>
      <slot name="leftBottom"></slot>
    </template>
    
    <view :class="[eleClass, wuxingClass]" :style="[eleStyle]">{{ nameShow }}</view>
    
    <template v-slot:rightTop>
      <!-- 显示阴阳 -->
      <view v-if="isYinyangShow" class="cm-text-left" :class="[eleClass, wuxingClass]" :style="[eleStyle, yinyangStyle]">{{ yinyangText }}</view>
      <!-- 不显示阴阳的情况下保留自定义插槽 -->
      <view v-else class="cm-text-left" :class="[eleClass]" :style="[eleStyle]"><slot name="rightTop"></slot></view>
    </template>
    <template v-slot:rightBottom>
      <view class="cm-text-left" :class="[eleClass]" :style="[eleStyle]"><slot name="rightBottom"></slot></view>
    </template>
  </cm-tip-text>
</template>

<script src="./baguaElement.js"></script>

<style lang="stylus">
@import './baguaElement.styl'
</style>
